<template>
  <div class="phoneHost">
    <a-button size="large" type="primary" htmlType="submit" class="login-button" @click.stop.prevent="wxSubmit"
      >  <img src="@/assets/chat/wxlogo1.png"/>微信登录
    </a-button>
  
  </div>
</template>
 
<script>
import { mapActions, mapGetters, mapState } from 'vuex'
import { ACCESS_TOKEN, USER_NAME,USER_INFO,USER_AUTH,SYS_BUTTON_AUTH,UI_CACHE_DB_DICT_DATA,TENANT_ID,CACHE_INCLUDED_ROUTES,LIMIT_LIST,DATA_MONITOR,ACCESS_CODE } from "@/store/mutation-types"
import { welcome } from "@/utils/util"
import { getFileAccessHttpUrl, getAction } from '@/api/manage'
/**
 * @description
 *
 * 官方网文档地址：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
 *
 * 网页授权步骤
 *
 * 1、拼接授权地址
 * 2、访问授权地址
 * 3、微信回调携带 code 参数
 * 4、code 发送给服务器获取 openId token 等信息 结束
 *
 * 注意事项：
 *  1、redirect_uri 重定向地址.
 *	 	1）线上环境：该参数是对应线上的域名，例如：https:xxx.web.com/ 这个地址要可以访问到你的 web 项目
 * 		2）开发环境：可能访问路径是：http://192.168.0.18:8080 但是这是内网地址，外网无法访问需要借助 内网穿透 工具
 * 		把内网映射到外网 例如： http://n9yjxe.natappfree.cc -> 127.0.0.1:8080 我这里就可以填写 http://n9yjxe.natappfree.cc/ 这个地址
 *
 * 2、微信公众号管理端配置 https://mp.weixin.qq.com/cgi-bin/settingpage?t=setting/function&action=function&token=1538596787&lang=zh_CN
 * 		1）设置与开发->公众号设置->功能设置->网页授权域名，配置你对应的线上域名或内网穿透域名，是域名没有http://或https:// 访问路径等
 * 		2）文件校验域名，这个步骤是微信要验证你的域名，放在域名根路径下要可以访问到 例如：https:xxx.web.com/MP_verify_JrxFeFmrqcxyTPAW.txt 即可
 * 		3）如果是开发环境，MP_verify_JrxFeFmrqcxyTPAW 放在项目 public 开启内网穿透就可以了
 * 3、内网穿透 https://natapp.cn/
 * 4、使用微信开发工具进行网页调试，需要把自己添加为微信公众号的开发者才可以
 *
 */

// 微信授权登陆地址
const WX_AUTH_URL = 'https://open.weixin.qq.com/connect/oauth2/authorize?'
// 重定向参数-固定写法
const REDIRECT = '#wechat_redirect'
export default {
  data() {
    return {
      account: '',
      smsCode: '',
      params: {
        appid: 'wx7601ccd1732edde1', // 公众号 APP ID
        redirect_uri: `${encodeURI('ai.universetime.com.cn')}`, // 授权后重定向的回调链接地址， 请使用 urlEncode 对链接进行处理
        response_type: 'code', // 固定写法
        scope: 'snsapi_userinfo', // snsapi_base 静默授权获取 open id ；snsapi_userinfo 需要用户授权，获取详细信息
        // state:'code', // a-zA-Z0-9的参数值，最多128字节
      },
      code: '', // 微信返回 code
      tem_poll: null,
      userResultData:null,
      scene: '',
    }
  },
  created() {
    // 获取地址参数
    const params = new URLSearchParams(location.search)
    this.code = params.get('code')
    console.log(this.code)
  },
  beforeDestroy() {
    //清除定时器
    this.getClearInterval()
  },
  mounted(){
    // this.getQrUrl()
  },
  methods: {
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    getClearInterval(){
      clearInterval(this.tem_poll)
      this.tem_poll = null
    },
    wxSubmit() {
      this.loginAuthorize()
    
    },
    loginAuthorize() {
      var code;
      try{
        code = JSON.parse(sessionStorage.getItem('RECOMMEND_CODE') || "")
      }catch{
        code = ''
      }
      getAction('/wechat/api/authorize/?code=' + code)
        .then((res) => {
          console.log('res', res)

          if (res.success) {
            this.scene = res.message
              // 访问地址
            // const access_url = WX_AUTH_URL + `${new URLSearchParams(this.params)}` + REDIRECT
            // console.log('access_url',access_url)
            // 这些需要判断没有 code 情况拉起授权登陆，有就结束放在重复拉起授权登陆
              location.href = res.result
              this.tem_poll = setInterval(this.loginPoll, 1000)
          }
        })
        .finally(() => {
          this.tableLoading = false
        })
    },
    loginPoll() {
      this.$http
        .post('/wechat/api/wechatOpenIdLogin?sceneStr=' + this.scene)
        .then((res) => {
            this.userResultData = res.result
            console.log('this.userResultData',this.userResultData)
          if (res.success) {
            Vue.ls.set(ACCESS_CODE, res.result.code, 30 * 24 * 60 * 60 * 1000)
            this.userInfoData = res.result.userInfo
            // 清除定时器
            this.getClearInterval()
            setTimeout(() => {
              this.wxLogin(res.result)
            }, 3000);

            return
          }
        })
        .catch((error) => {
          console.log('error', error)
        })
    },
    //账号密码登录
    wxLogin(results) {
      localStorage.setItem('username', JSON.stringify(this.userInfoData.username))
      localStorage.setItem('userAll', JSON.stringify(this.userInfoData))
      const result = results
      const userInfo = result.userInfo
      Vue.ls.set(ACCESS_TOKEN, result.token, 30 * 24 * 60 * 60 * 1000)
      Vue.ls.set(USER_NAME, userInfo.username, 30 * 24 * 60 * 60 * 1000)
      Vue.ls.set(USER_INFO, userInfo, 30 * 24 * 60 * 60 * 1000)
      Vue.ls.set(UI_CACHE_DB_DICT_DATA, result.sysAllDictItems, 30 * 24 * 60 * 60 * 1000)
      this.$store.commit('SET_TOKEN', result.token)
      this.$store.commit('SET_INFO', userInfo)
      this.$store.commit('SET_NAME', { username: userInfo.username, realname: userInfo.realname, welcome: welcome() })
      this.$store.commit('SET_AVATAR', userInfo.avatar)
      this.loginSuccess()
      this.$store.dispatch('userLimitList', { userId: this.userInfo().id })
    },
    // getQrUrl() {
    //   this.loading = false

    //   this.$http
    //     .post('/sys/thirdLogin/render/WECHAT_OPEN')
    //     .then((res) => {
    //       this.qr_url = res.result
    //       var themObj = this.getRequest(this.qr_url)
    //       console.log('this.getRequest(this.qr_url)', this.getRequest(this.qr_url))
    //       // this.params.redirect_uri = encodeURIComponent(themObj.redirect_uri)
    //     })
    //     .catch((error) => {
    //       console.log('error', error)
    //     })
    // },
    getRequest(url) {
      var url = url //获取url中"?"符后的字串
      var theRequest = new Object()
      if (url.indexOf('?') != -1) {
        var str = url.substr(1)
        var strOther = str.split('&')
        for (var i = 0; i < strOther.length; i++) {
          theRequest[strOther[i].split('=')[0]] = decodeURI(strOther[i].split('=')[1])
        }
      }
      return theRequest
    },
  },
}
</script>
 
<style lang="less" scoped>
button {
  background-image: linear-gradient(219deg, #00a45a 0%, #03ce72 100%);
  color: #ffffff;
  width: 100%;
  height: 42px;
  box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(0, 164, 90, 0.08);
  border-radius: 48px;
  font-size: 38rpx;
  border: none;
}

input {
  height: 29px;
  width: 90%;
  border-radius: 10px;
  border: 1px solid #cfcfcf;
  padding: 2px 13px;
}
button.login-button {
    padding: 0 15px;
    font-size: 16px;
    height: 40px;
    width: 100%;
    background: linear-gradient(90deg, #0b9d0b, #0b9d0b);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    img{
      width: 20px;
      margin-right: 5px;
    }
  }
  .phoneHost{
    display: none;
  }
@media screen and (max-width: 767px) {
  .phoneHost{
    display: block;
  }
}
</style>